<template>
    <div>
        <base-space :align="`center`">
            <base-date-picker
                    ref="startRef"
                    :valueFormat="`YYYY-MM-DD`"
                    @onDateChange="onStartDateChange"
                    :disabledDate="disabledStartDate"
                    :val="startDate"/>
            <span>-</span>
            <base-date-picker
                    ref="endRef"
                    :valueFormat="`YYYY-MM-DD`"
                    @onDateChange="onEndDateChange"
                    :disabledDate="disabledEndDate"
                    :val="endDate"/>
        </base-space>
    </div>

</template>

<script>
    import BaseSpace from '../basic/BaseSpace.vue';
    import BaseDatePicker from './BaseDatePicker.vue'
    import moment from 'moment'

    export default {
        name: 'DateGroupPicker',
        components: {
            BaseDatePicker, BaseSpace,
        },
        props: {
            valueFormat: {
                default: 'YYYY-MM-DD'
            },
            showTime: {
                type: [Object, Boolean],
                default: false
            },
            startVal: {
                default: ''
            },
            endVal: {
                default: ''
            },

        },
        created() {
            this.startDate = this.startVal;
            this.endDate = this.endVal;
        },
        methods: {
            reset() {
                this.startDate = "";
                this.endDate = "";
                this.$refs.startRef.reset();
                this.$refs.endRef.reset();
            },
            onStartDateChange(value) {
                this.startDate = value;
                if ((this.startDate && this.endDate) || (!this.startDate && !this.endDate)) {
                    this.$emit('onStartDateChange', {startDate: this.startDate, endDate: this.endDate});
                }

            },
            onEndDateChange(value) {
                this.endDate = value;
                if ((this.startDate && this.endDate) || (!this.startDate && !this.endDate)) {
                    this.$emit('onEndDateChange', {startDate: this.startDate, endDate: this.endDate});
                }
            },
            disabledStartDate(current) {
                if (this.endDate) {
                    return current > moment(this.endDate).endOf("day") || current < moment("1969-12-31").endOf("day") && current
                } else {
                    return current < moment("1969-12-31").endOf("day") || current > moment(new Date()).endOf("day")
                }
            },
            disabledEndDate(current) {
                if (this.startDate) {
                    return current < moment(this.startDate).startOf("day") || current > moment(new Date()).endOf("day")
                } else {
                    return current > moment(new Date()).endOf("day") || current < moment("1969-12-31").endOf("day")
                }
            }
        }
    }
</script>

<style scoped>

</style>
